<template>
<!-- 塔吊综合统计页面 -->
  <div class="relative">
    <div class="tower-header">
      <zz-back class="left" name="塔吊监控" backPath = "projectTower" :query = queryObj :title = backName style="padding: 0"></zz-back>
      <small class='left updateTime-box' v-if="updateTime">(数据更新时间: {{$moment(updateTime).format('YY-MM-DD HH:mm:ss')}})</small>
      <div class="head-right right">
        <button class="button-line mr10" :class="{'active': type === 1}">每日记录</button>
        <button class="button-line mr10" :class="{'active': type === 2}" @click="gopage('/tcMonitor/eachTowerRecord', 'week', id, code, projectId)">每周统计</button>
        <button class="button-line mr20" :class="{'active': type === 3}" @click="gopage('/tcMonitor/eachTowerRecord', 'month', id, code, projectId)">每月统计</button>
        <div class="date">
          <span>日期</span>
          <zz-date @change=handleChange type="day"></zz-date>
        </div>
      </div>
    </div>
    <div class="main-left left">
      <div class="summary">
        <div class="title ml20 mt15 mb10">
          报警记录统计
          <div class="right totalnum mr10">
            累计报警：<span>{{totalWarnOptions.allAlarm || 0}}</span>次
          </div>
        </div>
        <div class="circle">
          <div style="width: 100%; height: 185px; padding-top:20px;" ref="totalWarn"></div>
        </div>
      </div>
      <!-- 吊重记录 -->
      <div class="record">
        <div class="title ml20 mt15 mb10">
          吊重记录
          <div class="right totalnum mr10">
            最大吊重<span>{{maxweight || 0}}</span>t
          </div>
        </div>
        <div class="recordChart">
          <div style="width: 100%; height: 230px" ref="weightRecord"></div>
        </div>
      </div>
      <div class="detailInfo">
        <div class="angle">
          <div class="sm-tit">
            <i class="iconfont icon-weibiaoti- pointer"></i>
            回转角度范围
          </div>
          <div>{{range}}</div>
        </div>
        <div class="fudu right">
          <div class="sm-tit">
            <i class="iconfont icon-fudu pointer"></i>
            幅度范围
          </div>
          <div>{{radius}}</div>
        </div>
      </div>
      <div class="detailInfo">
        <div class="wind">
          <div class="sm-tit">
            <i class="iconfont icon-fengsu pointer"></i>
            最大风速
          </div>
          <div>{{maxwindspeed}}</div>
        </div>
        <!-- <div class="dip right">
          <div class="sm-tit">
            <i class="iconfont icon-icon-test1 pointer"></i>
            倾斜范围
          </div>
          <div>13.2°~413°</div>
        </div> -->
      </div>
    </div>
    <div class="main-right right">
      <div class="title ml20 mt15 mb10">
        设备工作记录
        <div class="right mr20 warns">
          <span class="warn1 warn"></span> 预警
          <span class="warn2 warn"></span> 报警
        </div>
      </div>
      <!-- <zz-table
        style="width:100%;"
        :title="title"
        :dataList = 'dataList'>
      </zz-table> -->
      <div class="record-list">
        <table>
          <tr>
            <th>吊重</th>
            <th>力矩百分比(%)</th>
            <th>转角范围(°)</th>
            <th>幅度范围(m)</th>
            <th>起吊-落吊高度</th>
            <th>起吊-落吊时间</th>
          </tr>
          <tr v-for="item in dataList" v-if="dataList.length > 0">
            <td :style="{color: item.loadStatus === 1 ? '#f79412' : (item.loadStatus === 2 ? '#fe0000' : '')}">{{item.maxLoad}}</td>
            <td :style="{color: item.percentStatus === 1 ? '#f79412' : (item.percentStatus === 2 ? '#fe0000' : '')}">{{item.maxPercent}}</td>
            <td :style="{color: item.angleStatus === 1 ? '#f79412' : (item.angleStatus === 2 ? '#fe0000' : '')}">{{item.startAngle}}-{{item.endAngle}}</td>
            <td :style="{color: item.radiusStatus === 1 ? '#f79412' : (item.radiusStatus === 2 ? '#fe0000' : '')}">{{item.minRadius}}-{{item.maxRadius}}</td>
            <td :style="{color: item.heightStatus === 1 ? '#f79412' : (item.heightStatus === 2 ? '#fe0000' : '')}">{{item.minHeight}}-{{item.maxHeight}}</td>
            <td>{{item.startRecordTime}}-{{item.endRecordTime}}</td>
          </tr>
          <tr class="nodate" v-if="!dataList || dataList.length === 0">
            <td colspan="8"><i class="iconfont icon-warning"></i>暂无数据</td>
          </tr>
        </table>
      </div>
      <zz-paginate pagingId="pageday" v-if="dataList.length > 0" :simple="false" :isTotalItem="false" @choose="query" :padding="[0]" class="right mr20"></zz-paginate>
      <div class="hasRecordNum ml20">
        <div class="mr20">共有 <span>{{total}}</span> 次记录 </div>
        <div class="ml10">有效工作时长： <span v-if="hasTime">{{hasTime}}</span><span v-else>暂无数据</span></div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { getTowercraneWorkDataByDay, getTowercraneMonitorAnalysis, towerWorkNumWorkTime } from '../../../service/api.js'
import pie from './pie'
import weightRecord from './weightRecord.js'

export default {
  name: 'projectRecord',
  computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        type: 1,  // 1day 2week 3month
        date:'', // 查询日期
        page:1,
        pageSize:30,
        dataList: [],
        title: [
          {name: '吊重', width: '15%', align: 'center'},
          {name: '力矩百分比(%)', width: '18%', align: 'center'},
          {name: '转角范围(°)', width: '15%', align: 'center'},
          {name: '幅度范围(m)', width: '12%', align: 'center'},
          {name: '起吊-落吊高度(m)', width: '15%', align: 'center'},
          {name: '起吊-落吊时间', width: '15%', align: 'center'}
        ],
        totalWarn: null,
        totalWarnOption: null,
        totalWarnOptions: {
          data: [],
          color: ['#33cadb', '#48dba4', '#afe551', '#cbf1f4', '#a3c3fe', '#cbf1f4', '#d4c054', '#d49054', '#54a8d4', '#546fd4', '#7e54d4', '#b154d4', '#5472d4'],
        },
        loadArray: [], // 吊重数据
        forceArray: [], // 力矩数据
        time: [],
        projectId: null ,
        id: '',
        code: '',
        backName: '',
        maxweight: '',
        range: '',
        radius: '',
        maxwindspeed: '',
        total: '',
        hasTime: '',
        queryObj: {
          id: '',
          name: ''
        },
        updateTime: ''
      }
    },
    mixins: [weightRecord],
    mounted () {
      this.id = this.$route.query.Id
      this.projectId = this.$route.query.pjId || ''
      this.type = this.$route.query.t === 'day' ? 1 : (this.$route.query.t === 'week' ? 2 : 3)
      this.code = this.$route.query.code ? this.$route.query.code : ''
      this.backName = this.code + '监控记录'
      this.queryObj = {
        id: this.projectId ? this.projectId : '',
        name: this.$route.query.pjName ? this.$route.query.pjName : ''
      }
      let mydate = new Date()
      this.date = mydate.getFullYear() + '-' + (mydate.getMonth() + 1) + '-' + mydate.getDate()
      this.getByDady() // 设备工作记录
      this.getWarnList() // 报警记录统计
      this.getTatalNum() // 总记录数
    },
    methods: {
      handleChange (state) {
        // console.log(state)
        this.date = state
        if (!this.date) {
          this.date = this.$moment().format('YYYY-MM-DD')
        }
        this.getByDady() // 设备工作记录
        this.getWarnList() // 报警记录统计
        this.getTatalNum() // 总记录数
      },
      getByDady () {
        this.dataList = []
        let data = {
          'coId': this.currentUser.coId,
          'projectId': this.projectId,
          'mid': this.currentUser.mid,
          'referId': this.id,
          'dataTime': this.date,
          'page': this.page,
          'pageSize': this.pageSize
        }
        this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/towercrane/getTowercraneWorkDataByDay`,
            data: this.$qs.stringify(data, {indices: false}),
            paginate: true,
            paginId: 'pageday',
          }).then(res => {
            this.dataList = res.data.data.dataList
          })
      },
      // 报警记录统计
      getWarnList () {
        // this.time=['00:00','00:01','00:02','00:03','00:04','00:05','00:06','00:07','00:08','00:09','00:10','00:11','00:12','00:13','00:14','00:15','00:16','00:17','00:18','00:19','00:20','00:21','00:22','00:23','00:24','00:25','00:26','00:27','00:28','00:29','00:30','00:31','00:32','00:33','00:34','00:35','00:36','00:37','00:38','00:39','00:40','00:41','00:42','00:43','00:01','00:01','00:01','00:01','00:01','00:01','00:50']
        // this.loadArray=[{value:1},{value:5},{value:10},{value:13},{value:1},{value:3},{value:6},{value:1},{value:9},{value:1},{value:1},{value:5},{value:10},{value:13},{value:1},{value:3},{value:6},{value:1},{value:9},{value:1},{value:1},{value:5},{value:10},{value:13},{value:1},{value:3},{value:6},{value:1},{value:9},{value:1},{value:1},{value:5},{value:10},{value:13},{value:1},{value:3},{value:6},{value:1},{value:9},{value:1},{value:1},{value:5},{value:10},{value:13},{value:1},{value:3},{value:6},{value:1},{value:9},{value:1}]
        // this.forceArray=[{value:1},{value:1.3},{value:1.9},{value:3},{value:1},{value:13},{value:6.2},{value:11},{value:9},{value:1},{value:7},{value:5},{value:10},{value:3},{value:10},{value:3},{value:6},{value:9},{value:9},{value:1},{value:1},{value:2},{value:10},{value:1},{value:10},{value:3},{value:6},{value:1},{value:9},{value:1},{value:1},{value:5},{value:10},{value:13},{value:1},{value:3},{value:6},{value:1},{value:9},{value:1},{value:1},{value:5},{value:10},{value:13},{value:1},{value:3},{value:6},{value:1},{value:9},{value:1}]
        // let l = this.time.length
        // let start = l > 50 ? l - 50 : 0
        // let end = l > 50 ? l -1 : l
        // this.initWeightRecord(this.loadArray, this.forceArray, this.time, start, end)
        getTowercraneMonitorAnalysis({
          coId: this.currentUser.coId,
          projectId: this.projectId,
          mid: this.currentUser.mid,
          referId: this.id, //设备id
          pjId: this.projectId,  // 项目id
          type: this.type,  // 1/2/3/4 日/轴/月/年
          startTime: this.date,
          endTime: this.date
        }).then( res => {
          //console.log(res)
          this.updateTime = res.data.updateTime
          //this.updateTime = 1548296049000
          // 报警记录统计饼状图
          this.totalWarnOptions.data = [
            {name: '超重', value: res.data.alarmData.overweightcount,label: {show:true}, labelLine: {show: true} },
            {name: '限位', value: res.data.alarmData.limitlocationcount,label: {show:true}, labelLine: {show: true} },
            {name: '防碰撞', value: res.data.alarmData.knockcount,label: {show:true}, labelLine: {show: true} },
            {name: '限行区', value: res.data.alarmData.limitareacount,label: {show:true}, labelLine: {show: true} },
            {name: '风速', value: res.data.alarmData.windcount,label: {show:true}, labelLine: {show: true} },
            {name: '倾斜', value: res.data.alarmData.anglecount,label: {show:true}, labelLine: {show: true} }
          ]
           for (let i = 0; i < this.totalWarnOptions.data.length; i++) {
            if (this.totalWarnOptions.data[i].value == 0) {
              this.totalWarnOptions.data[i].labelLine.show = false
              this.totalWarnOptions.data[i].label.show = false
            }
          }
          this.totalWarnOptions.allAlarm =  res.data.alarmData.alarmcount || 0
          this.totalWarnOption = pie(this.totalWarnOptions)
          this.totalWarn = this.$Echarts.init(this.$refs.totalWarn);
          this.totalWarn.setOption(this.totalWarnOption)
          this.maxweight = res.data.alarmData.maxweight
          this.range = res.data.alarmData.range || 0
          this.radius = res.data.alarmData.radius || 0
          this.maxwindspeed = res.data.alarmData.maxwindspeed || 0
          this.loadArray = [{value: 0}]
          this.forceArray = [{value: 0}]
          this.time = [0]
          if (res.data.alarmData.weightList) {
            this.loadArray = []
            this.forceArray = []
            this.time = []
            for (let i = 0; i < res.data.alarmData.weightList.length; i++) {
            this.time.push(res.data.alarmData.weightList[i].time)
            this.loadArray.push({value: res.data.alarmData.weightList[i]})
            this.forceArray.push({value: res.data.alarmData.percentList[i]})
            }
          }
          let l = this.time.length
          let start = l > 50 ? l - 50 : 0
          let end = l > 50 ? l -1 : l
          this.initWeightRecord(this.loadArray, this.forceArray, this.time, start, end)
        }).catch( err => {
          console.log(err)
        })
      },
      getTatalNum () {
        towerWorkNumWorkTime({
          coId: this.currentUser.coId,
          projectId: this.projectId,
          mid: this.currentUser.mid,
          referId: this.id,  // 设备id
          dataTime: this.date   // 时间
        }).then( res => {
          // console.log(res)
          // 记录条数，有效工作时长
          this.total = res.data.towerWorkNum
          let worktime = res.data.towerWorkTime
          this.hasTime = Math.floor(worktime/(60*60)) + ':' + Math.floor((worktime%(60*60))/60) + ':' + worktime%(60)
        }).catch( err => {
          console.log(err)
        })
      },
      // 切换页码
      query (item) {
        console.log(item)
        this.page = item
        this.getByDady()
      },
      gopage (url, type, id, code, pid) {
        this.$router.push({ path: url, query: { t: type, Id: id, name: code, pjId: pid  }})
      },
    }
}
</script>

<style lang="scss" scoped>
  .tower-header{
    height: 60px;
    line-height: 30px;
    padding: 15px 20px 17px 20px;
    box-sizing: border-box;
    border-bottom: 1px $color-line solid;
    .updateTime-box {
      line-height: 31px;
    }
  }
  .head-right {
    position: relative;
    z-index: 6;
    .date {
      display: inline-block;
      span {
        line-height: 30px;
      }
    }
    .active {
      color: #fff;
      background: $color;
    }
  }
  .main-left {
    width: 28%;
    .summary,.record {
      .totalnum {
        font-size: 12px;
        color: #969696;
        span {
          color: $color;
          margin: 0 5px;
        }
      }
      .circle,.recordChart {
        margin: 10px 0 10px 20px;
        border: 1px solid #f2f2f2;
        height: 214px;
      }
    }
    .detailInfo {
      margin-bottom: 10px;
      padding-left: 20px;
      >div {
        width: 48%;
        display: inline-block;
        border: 1px solid #f2f2f2;
        > div {
          padding: 26px 20px;
          font-size: 18px;
          font-weight: bold;
        }
        .sm-tit {
          border-bottom: 1px dashed #f2f2f2;
          padding: 16px 12px;
          font-size: 14px;
          font-weight: 500;
          i {
            color: $color;
          }
        }
      }
    }
  }
  .main-right {
    width: 72%;
    .record-list {
      //width: 100%;
      padding: 0 20px;
      table {
        border: 1px #e2eaee solid;
        border-spacing: 0;
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 20px;
        .nodate {
          text-align: center;
          i {
            color: $color;
            margin-right: 10px;
            vertical-align: middle;
          }
        }
        tr {
          height: 38px;
          text-align:left;
        }
        tr:nth-child(odd) {
          background: #fcfcfc;
        }
        tr:nth-child(even) {
          background: #fff;
        }
        th {
          background: #eef1f1;
          font-size: 14px;
          color: #363c3c;
          font-weight: 400;
          border: 1px solid #e5e6e8;
          padding-left: 20px;
        }
        td {
          font-size: 14px;
          border:1px #e2eaee solid;
          padding-left: 20px;
        }
      }
    }
    .hasRecordNum {
      >div {
        display: inline;
        span {
          font-weight: bold;
        }
      }
    }
    .warns {
      .warn {
        width: 12px;
        height: 12px;
        display: inline-block;
        border-radius: 50%;
        margin-right: 8px;
      }
      .warn1 {
        background: #f79412;
      }
      .warn2 {
        background: #fe0000;
        margin-left: 20px;
      }
    }
  }
  .title {
    border-left: 2px solid $color;
    padding-left: 6px;
    font-size: 14px;
  }
</style>

